<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的世界北境服务器</title>
    <meta charset="UTF-8">
    <meta name="description" content="EndGam Gaming Magazine Template">
    <meta name="keywords" content="endGam,gGaming, magazine, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link th:href="@{/img/3333.jpg}" rel="shortcut icon"/>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i" rel="stylesheet">


    <!-- Stylesheets -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/slicknav.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/cashbox-share.css}"/>

    <!-- Main Stylesheets -->
    <link rel="stylesheet" th:href="@{/css/style.css}"/>


    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<!--登录模态窗-->
<div class="modal fade" id="loginModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">输入您的账号密码登入系统</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">

                <form id="saveActivityForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="playerId" class="col-sm-2 control-label">账号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input id="playerId" class="form-control" name="playerName" type="text"
                                   placeholder="请输入游戏账号">
                        </div>
                    </div>

                    <div class="form-group">

                        <label for="playerPass" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="password" class="form-control" placeholder="请输入游戏密码" id="playerPass"
                                   name="pass">
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="hashPass()">登录</button>
            </div>
        </div>
    </div>
</div>
<div id="preloder">
    <div class="loader"></div>
</div>

<!-- Header section -->
<header class="header-section">
    <div class="header-warp">
        <div class="header-social d-flex justify-content-end">

        </div>
        <div class="header-bar-warp d-flex">
            <!-- site logo -->
            <a href="home.html" class="site-logo">
                <img th:src="@{/img/logo.png}" alt="">
            </a>
            <nav id="list" class="top-nav-area w-100">
                <div class="user-panel">
                </div>
                <!-- Menu -->
                <ul class="main-menu primary-menu">
                    <li><a href="home.html">主页</a></li>
                    <li><a href="games.html">服务器介绍</a>
                        <ul class="sub-menu">
                            <li><a href="game-single.html">游戏评论</a></li>
                        </ul>
                    </li>
                    <li><a href="review.html">评论</a></li>
                    <li><a href="blog.html">最新动态</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
            <span class="glyphicon glyphicon-user"></span>
            <span style="padding: 0 ;height: 30px;width: 150px" th:if="${session.player == null}">
                <button style="height: 30px;width: 100px ; padding: 0" type="button" class="btn btn-info"
                        data-toggle="modal" onclick="openActivityCreateModal()"><span
                        class="glyphicon glyphicon-plus"></span> 登录
                </button>
            </span>
            <span style="padding: 0 ;height: 30px;width: 150px" th:if="${session.player != null}">
                <button style="height: 30px;width: 150px" type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-user"></span><span th:text="${session.player.realname}"></span>
                </button>
            </span>

        </div>
    </div>
</header>
<!-- Header section end -->


<!-- Hero section -->
<section class="hero-section overflow-hidden">
    <div class="hero-slider owl-carousel">
        <div class="hero-item set-bg d-flex align-items-center justify-content-center text-center"
             th:data-setbg="|@{/img/timg.jpg}|">
            <div class="container">
                <h2>欢迎来到Minecraft北境</h2>
                <p>凛冬将至<br>感谢大家的游玩</p>
                <a href="#" class="site-btn">了解更多 <img th:src="@{/img/double-arrow.png}" alt="#"/></a>
            </div>
        </div>
        <div class="hero-item set-bg d-flex align-items-center justify-content-center text-center"
             th:data-setbg="|@{/img/2222.jpg}|">
            <div class="container">
                <h2>戳破谎言，我们还剩下什么？</h2>
                <p>当一切都消失的时候你会明白生命究竟有何价值。<br>权力存于人心。信则有，不信则无。惑人的把戏，如浮影游墙。即便是矮小之人，也能投射出巨大的影子。

                </p>
                <a href="#" class="site-btn">了解更多 <img th:src="@{/img/double-arrow.png}" alt="#"/></a>
            </div>
        </div>
    </div>
</section>
<footer class="footer-section">
    <div class="container">
        <a href="#" class="footer-logo">
            <img th:src="@{/img/logo.png}" alt="">
        </a>

        <div class="copyright"><a href="">Colorlib</a> 2020 @北境</div>
        <div class="footer-hint">
            <div class="footer-hint-bg"></div>
            <div class="footer-hint-text">温馨提示：我直接提示</div>
        </div>
    </div>
</footer>
<!-- Footer section end -->


<!--====== Javascripts & Jquery ======-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.slicknav.min.js}"></script>
<script th:src="@{/js/owl.carousel.min.js}"></script>
<script th:src="@{/js/jquery.sticky-sidebar.min.js}"></script>
<script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/sha256-0.8.0.js}"></script>

<script th:src="@{/js/layui/layer.js}"></script>
<script type="text/javascript">
    function openActivityCreateModal() {
        $("#loginModal").modal('show');
    }

    function testFunction() {
        location.href = "/tnweb/toIndex";
    }

    function hashPass() {
        $("#playerPass").val(sha256_digest($("#playerPass").val()))
        $.post("/tnweb/sys/login", {
            'playerName': $("#playerId").val(),
            'pass': $("#playerPass").val()
        }, function (data) {
            if (!data.login) {
                layer.alert(data.message, {'icon': 2});
            } else {
                layer.alert(data.message + "，2秒后将自动跳转", {'icon': 1});
                setTimeout("testFunction()","2000");
            }
        }, 'json');
    }
</script>
</body>
</html>
